<template>
  <div class="screen-pie">
    <simple-chart :options="options" v-if="options"/>
  </div>
</template>
<script>
import simpleChart from '@/components/job/simple-chart'

export default {
  name: 'screen-pie',
  cnName: '饼图',
  components: {
    simpleChart
  },
  props: {
    data: Array
  },
  data() {
    return {
      options: null
    }
  },
  methods: {
    init() {
      const list = this.data
      this.options = {
        series: [
          {
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['50%', '50%'],
            data: list,
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}：{time|{d}%}\n',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#FFF',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#fff'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < 220;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            }
          }
        ]
      }
    }
  },
  watch: {
    data() {
      this.init()
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.screen-pie {
  position: relative;
  height: 100%;
}
</style>
